<template>
  <div class="reportFormPage">

    <div id="domid">
      <el-row>
        <el-col :span="5" :offset="19">
          <div class="pageNumBox">
            <span>第</span>
            <span>&nbsp;{{ form.page }}&nbsp;</span>
            <span>页，共</span>
            <span>&nbsp;{{ form.totalPage }}&nbsp;</span>
            <span>页</span>
          </div>
        </el-col>
      </el-row>
      <div class="topTwoBox">
        <div class="centerName">沥青薄膜加热试验检测记录表（一）</div>
        <div class="codeText">
          <tr>JGLQ10006</tr>
        </div>
      </div>
      <div class="threeTopBox">
        <div class="threeItem1" style="width: 90px">检测单位名称：</div>
        <div class="threeItem2">
          <span>{{ form.jiancdwmc }}</span>
        </div>
        <div class="threeItem1" style="width: 65px">记录编号：</div>
        <div class="threeItem2">
          <el-input v-model="form.jilbh" class="height100 bg-white" />
        </div>
      </div>

      <!-- .........................1111111111111111111111111111111......................................................... -->
      <table border="1" height="220px" bordercolor="#000000" cellpadding="2" cellspacing="0" align="center">
        <tbody>
          <tr>
            <td height="25" align="center" width="15%">
              <span style="width: 90px; display: inline-block">工程名称</span>
            </td>
            <td width="35%" class="text-center">
              <span>{{ form.gongcmc }}</span>
            </td>
            <td align="center" width="15%">
              <span style="width: 90px; display: inline-block">工程部位/用途</span>
            </td>
            <td width="35%" class="text-center">
              <span>{{ form.gongcbwyt }}</span>
            </td>
          </tr>
          <tr>
            <td height="50" align="center">样品信息</td>
            <td style="word-wrap: break-word; word-break: break-all;text-align:left" colspan="3">
              <span>样品名称：</span>
              <span>{{ form.yangpmc }}</span>
              <span>；样品编号：</span>
              <el-input type="text" v-model="form.yangpbh" style="width: 42%; height: auto" />
              <span>；样品数量：</span>
              <span>{{ form.yangpsl }}</span>
              <span>；样品状态：</span>
              <span>{{ form.yangpzt }}</span>
              <span>；来样时间：</span>
              <span>{{ form.yangpsj }}</span>
            </td>
          </tr>

          <tr>
            <td height="25" align="center" width="15%">
              <span style="width: 90px; display: inline-block">试验检测日期</span>
            </td>
             <!-- <td width="35%" class="text-center">{{ form.shiyjcrq }}</td> -->                                            
 <td width="35%" class="text-center">
      <el-input v-model="form.shiyjcrq" />
</td>
            <td align="center" width="15%">
              <span style="width: 90px; display: inline-block">试验条件</span>
            </td>
            <td width="35%">
              温度：
              <el-input type="number" v-model="form.shiytjwd" class="height100" style="width: 15%" />
              ℃；湿度：
              <el-input type="number" v-model="form.shiytjsd" class="height100" style="width: 15%" />
              %RH
            </td>
          </tr>

          <tr>
            <td height="25" align="center" width="15%">
              <span style="width: 90px; display: inline-block">检测依据</span>
            </td>
            <td width="35%">
              <el-input type="text" v-model="form.jiancyj" class="height100 width100" />
            </td>
            <td align="center" width="15%">
              <span style="width: 90px; display: inline-block">判定依据</span>
            </td>
            <td width="35%">
              <el-input type="text" v-model="form.pandyj" class="height100 width100" />
            </td>
          </tr>

          <tr>
            <td height="30" align="center">主要仪器设备<br />名称及编号</td>
            <td colspan="3">
              <el-input type="textarea" @dblclick.native="showBsInstrumentView" :rows="2" v-model="form.zhuyyqsbmcjbh"
                class="height100 width100 mark" readonly>
              </el-input>
              <!-- <el-button type="text" @click="showBsInstrumentView"><i class="el-icon-search"></i></el-button> -->
            </td>
          </tr>
        </tbody>
      </table>
      <!-- .................................沥青种类及产地............................................... -->
      <table class="kind-table" border="1">
        <tbody>
          <tr>
            <td class="small">沥青产地</td>
            <td class="large"><input type="text" v-model="form.liqcd"/></td>
            <td class="small">沥青种类及标号</td>
            <td class="large"><input type="text" v-model="form.liqzljbh"/></td>
          </tr>
        </tbody>
      </table>
    <!-- .................................薄膜加热质量变化............................................... -->
      <table class="custom-table">
      <tr>
        <td >样品编号</td>
        <td>盛样皿质量（g)</td>
        <td>加热前盛样皿和试样合计质量（g）</td>
        <td>试样质量（g)</td>
        <td>加热后盛样皿和试样合计质量（g）</td>
        <td>加热后样品质量（g)</td>
        <td>薄膜加热质量变化（%）</td>
        <td>平均值（%）</td>
      </tr>
     
      <tr v-for="(row, index) in bm1Rows" :key="index">
        <td v-if="index === 0" rowspan="2">{{index + 1}}</td>
        <td><input type="text" v-model="row.chengymzl"/></td>
        <td><input type="text" v-model="row.jiarqcymhsyhjzl"/></td>
        <td><input type="text" v-model="row.shiyzl" disabled/></td>
        <td><input type="text" v-model="row.jiarhcymhsyhjzl"/></td>
        <td><input type="text" v-model="row.bomjrzlbh" disabled/></td>
        <td><input type="text" v-model="row.pingjz" disabled/></td>
        <td v-if="index === 0" rowspan="2"><input type="text" v-model="row.pingjz" disabled/></td>
      </tr>
    </table>
    <!-- .................................残留物针入度比............................................... -->
    <table class="custom-table">
      <tr>
        <td>样品编号</td>
        <td>加热前原试样针入度（0.1mm）</td>
        <td>加热后残留物（25℃）的针入度（0.1mm）</td>
        <td>试样薄膜加热后残留物针入度比（%）</td>
        <td>针入度比平均值（%）</td>
      </tr>
      <tr v-for="(row, index) in bm2Rows" :key="index">
        <td v-if="index === 0" rowspan="2">{{index + 1}}</td>
        <td><input type="text" v-model="row.jiarqysyzrd"/></td>
        <td><input type="text" v-model="row.jiarhclwdzrd"/></td>
        <td><input type="text" v-model="row.shiybmjrhclwzrdb" disabled/></td>
        <td v-if="index === 0" rowspan="2"><input type="text" v-model="row.zhenrdbpjz" disabled/></td>
      </tr>
    </table>
    <!-- .................................残留物软化点增值............................................... -->
    <table class="custom-table">
      <tr>
        <td>样品编号</td>
        <td>加热软化点（℃）</td>
        <td>加热后软哈点（5℃）</td>
        <td>残留物软化点增值（℃）</td>
        <td>平均值（%）</td>
      </tr>
      <tr v-for="(row, index) in bm3Rows" :key="index">
            <td v-if="index === 0 || index === 2" rowspan="2">{{index + 1 === 3 ? 2 : index+1}}</td>
            <td><input type="text" v-model="row.jiarrhd"></td>
            <td><input type="text" v-model="row.jiarhrhd"></td>
            <td><input type="text" v-model="row.canlwrhdzz" disabled></td>
            <td v-if="index === 0 || index === 2" rowspan="2"><input type="text" v-model="row.pingjz" disabled></td>
      </tr>
      
    </table>
      <!-- .....................................................33333333333333333................................................... -->
      <table cellpadding="2" cellspacing="0" bordercolor="#000000" style="
          width: 100%;
          border-right: 2px solid black;
          border-left: 2px solid black;
          border-top-style: none;
          border-bottom: 2px solid black;
          border-collapse: collapse;
          margin: none;
        ">
        <tbody>
          <tr>
            <td height="30" align="center">附加声明：</td>
            <td colspan="3">
              <el-input type="textarea" :rows="2" v-model="form.fujsm" />
            </td>
          </tr>
        </tbody>
      </table>

      <!-- .................................44444444444............................................. -->
      <table border="0" cellpadding="0" cellspacing="0" align="center"
        style="width: 100%; border-collapse: collapse; height: 22px" class="transparent">
        <tbody>
          <tr>
            <td width="10%" align="right">检测：</td>
            <td width="15%" align="left"></td>
            <td width="10%" align="right">记录：</td>
            <td width="15%" align="left"></td>
            <td width="10%" align="right">复核：</td>
            <td align="left" width="15%"></td>
            <td width="10%">日期：</td>
            <td align="left" width="15%">
              <div style="display: inline-block; margin-left: 20px">年</div>
              <div style="display: inline-block; margin-left: 20px">月</div>
              <div style="display: inline-block ;margin-left: 20px">日</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <bs-instrument-view ref="bsInstrumentViewRef" @select="selectInstrument"></bs-instrument-view>
    <ba-qj-detail-view ref="baQjDetailViewRef" @select="selectBaQjDetail"></ba-qj-detail-view>
  </div>
</template>

<script>
import { getLqBmjrjlbBsInfo } from "@/api/report_lq/lqBmjrjlbBsInfo";
import BsInstrumentView from "@/views/dept/bsInstrument/BsInstrumentView.vue";
import BaQjDetailView from "@/views/sycs/baQjDetail/BaQjDetailView.vue";
import decimal from "@/utils/big-decimal";
import Bus from '@/utils/bus';
export default {
  name: "lqbmjrjlb",
  components: {
    BsInstrumentView,
    BaQjDetailView,
  },
  props: {
    excelId: {
      type: [String, Number],
      default: () => ""
    },
  },
  data () {
    return {
      // 表单参数
      form: {
        baDetailVos: [{}, {}, {}, {}, {}, {}, {}, {}, {}]
      },
      bm1Rows: [ //this.rows = responseData; // 将后端返回的数据赋值给 rows 数组
        { yangpbh: '1', chengymzl: '', jiarqcymhsyhjzl: '', shiyzl: '', jiarhcymhsyhjzl: '', jiarhypzl: '', bomjrzlbh: '', pingjz: '' },
        { yangpbh: '2', chengymzl: '', jiarqcymhsyhjzl: '', shiyzl: '', jiarhcymhsyhjzl: '', jiarhypzl: '', bomjrzlbh: '', pingjz: '' },
      ],
      bm2Rows: [ //this.rows = responseData; // 将后端返回的数据赋值给 rows 数组
        { yangpbh: '1', jiarqysyzrd: '', jiarhclwdzrd: '', shiybmjrhclwzrdb: '', zhenrdbpjz: ''},
        { yangpbh: '2', jiarqysyzrd: '', jiarhclwdzrd: '', shiybmjrhclwzrdb: '', zhenrdbpjz: ''},
      ],
      bm3Rows: [ //this.rows = responseData; // 将后端返回的数据赋值给 rows 数组
        { yangpbh: '1', jiarrhd: '', jiarhrhd: '', canlwrhdzz: '', pingjz: ''},
        { yangpbh: '2', jiarrhd: '', jiarhrhd: '', canlwrhdzz: '', pingjz: ''},
        { yangpbh: '3', jiarrhd: '', jiarhrhd: '', canlwrhdzz: '', pingjz: ''},
        { yangpbh: '4', jiarrhd: '', jiarhrhd: '', canlwrhdzz: '', pingjz: ''},
      ],
    };
  },
  created () {
    this.getInfo()
  },
  methods: {
    // 获取详情
    getInfo () {
      if (!this.excelId) {
        return
      }
      getLqBmjrjlbBsInfo(this.excelId).then(response => {
        this.form = response.data;
        if (response.data.bm1List.length != 0) {
          this.bm1Rows = response.data.bm1List
        }
        if (response.data.bm2List.length != 0) {
          this.bm2Rows = response.data.bm2List
        }
        if (response.data.bm3List.length != 0) {
          this.bm3Rows = response.data.bm3List
        }
      });
    },
    // 显示仪器列表
    showBsInstrumentView () {
      this.$refs.bsInstrumentViewRef.init(this.form.shebIds);
    },
    // 仪器选择
    selectInstrument (info) {
      this.form.zhuyyqsbmcjbh = info.label;
      this.form.shebIds = info.ids;
    },
    // 显示盒号列表
    showBaQjDetailView (type, label) {
      this.label = label;
      this.$refs.baQjDetailViewRef.init(type);
    },
    // 盒号选择
    selectBaQjDetail (type, obj) {
      this.form.baDetailVos[type][this.label == 'tong' ? 'tongh' : "heh"] = obj.hh;
      this.form.baDetailVos[type][this.label == 'tong' ? 'tongzl' : "hezl"] = obj.quality;
      this.calculateHansl(type);
    },
    // 计算膨胀量
    calculatePengzl (type) {
      if (!this.form.baDetailVos[type]["paosqsjgd"] || !this.form.baDetailVos[type]["paoshsjgd"]) {
        return;
      }
      // 膨胀量 = 泡水后试件高度/泡水前试件高度
      this.form.baDetailVos[type]["pengzl"] = decimal.divide(
        this.form.baDetailVos[type]["paoshsjgd"],
        this.form.baDetailVos[type]["paosqsjgd"]
      )
      // 膨胀量平均值
      this.calculateAverage(type, 'pengzl', 'pengzpjz')
    },
    // 筒+试件质量改变
    tongjsjzlChange (type) {
      // 计算湿密度
      this.calculateShimd(type)
      // 计算吸水量
      this.calculateXisl(type)
    },
    // 计算湿密度
    calculateShimd (type) {
      if (!this.form.baDetailVos[type]["tongjsjzl"] || !this.form.baDetailVos[type]["tongzl"] || !this.form.baDetailVos[type]["tongtj"]) {
        return;
      }
      // 湿密度 = (筒+试件质量 - 筒质量) / 筒体积
      this.form.baDetailVos[type]["shimd"] = decimal.divide(
        decimal.subtract(this.form.baDetailVos[type]["tongjsjzl"],
          this.form.baDetailVos[type]["tongzl"]),
        this.form.baDetailVos[type]["tongtj"]
      )
      this.calculateGanmd(type)
    },
    // 计算干密度
    calculateGanmd (type) {
      if (!this.form.baDetailVos[type]["shimd"] || !this.form.baDetailVos[type]["hansl"]) {
        return;
      }
      // 干密度 = (湿密度*100)/(100+含水率)
      this.form.baDetailVos[type]["ganmd"] = decimal.divide(
        decimal.multiply(this.form.baDetailVos[type]["shimd"], 100),
        decimal.add(this.form.baDetailVos[type]["hansl"], 100)
      )
      // 干密度平均值
      this.calculateAverage(type, 'ganmd', 'ganmdpjz')
    },
    // 计算含水率
    calculateHansl (type) {
      if (!this.form.baDetailVos[type]["hejstzl"] || !this.form.baDetailVos[type]["hejgtzl"]) {
        return;
      }
      // 水分质量(g) = (盒+湿土质量(g)) -(盒+干土质量(g))
      this.form.baDetailVos[type]["shuifzl"] = decimal.subtract(
        this.form.baDetailVos[type]["hejstzl"],
        this.form.baDetailVos[type]["hejgtzl"]
      );
      if (!this.form.baDetailVos[type]["hezl"]) {
        return;
      }
      // 干土质量（g） = (盒+干土质量(g)) -(盒质量(g))
      this.form.baDetailVos[type]["gantzl"] = decimal.subtract(
        this.form.baDetailVos[type]["hejgtzl"],
        this.form.baDetailVos[type]["hezl"]
      );
      // 含水率(%) = (水分质量(g)) -(干土质量（g）) * 100%
      this.form.baDetailVos[type]["hansl"] = decimal.divide(
        decimal.multiply(this.form.baDetailVos[type]["shuifzl"], 100),
        this.form.baDetailVos[type]["gantzl"]
      );
      // 计算干密度
      this.calculateGanmd(type)
      // 平均含水率
      this.calculateAverage(type, 'hansl', 'hanslpjz');
    },
    // 计算吸水量
    calculateXisl (type) {
      console.log(this.form.baDetailVos[type]["paoshtjsjzl"], this.form.baDetailVos[type]["tongjsjzl"])
      if (!this.form.baDetailVos[type]["paoshtjsjzl"] || !this.form.baDetailVos[type]["tongjsjzl"]) {
        return;
      }
      // 吸水量 = （泡水后筒+试件质量(g)） - （筒+试件质量）
      this.form.baDetailVos[type]["xisl"] = decimal.subtract(
        this.form.baDetailVos[type]["paoshtjsjzl"],
        this.form.baDetailVos[type]["tongjsjzl"]
      );
      // 吸水量平均值
      this.calculateAverage(type, 'xisl', 'xislpjz');
    },
    // 计算平均值
    calculateAverage (count, type, averageType) {
      const str = decimal.round((Number(count) + 1) / 3, 0, 'CEILING')
      if (str == 0) {
        return
      }
      for (let i = 3; i >= 1; i--) {
        if (!this.form.baDetailVos[(str * 3 - i)][type]) {
          return
        }
      }
      let str2 = 30
      switch (Number(str)) {
        case 1:
          str2 = 30
          break;
        case 2:
          str2 = 50
          break;
        case 3:
          str2 = 98
          break;
      }
      let sum = 0;
      for (let i = 1; i <= 3; i++) {
        sum = decimal.add(sum, this.form.baDetailVos[(str * 3 - i)][type])
      }
      this.form[averageType + str2] = decimal.divide(
        sum, 3
      );
    }
  }
}
</script>

<style scoped>
  .custom-table {
    width: 100%;
    border-collapse: collapse;
    border-top: none;
  }

  .custom-table td {
    border: 1px solid black;
    padding: 8px;
    height: 30px;
    text-align: center;
  }
  .custom-table input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    text-align: center;
    background-color: white; /* 设置input背景为白色 */
  }
  .kind-table {
    width: 100%;
    border-collapse: collapse;
    border-top: none;
  }
  .kind-table td {
    border: 1px solid black;
    padding: 8px;
    height: 30px;
    text-align: center;
  }
  small {
    width: 16.67%; /* 设置小列宽度 */
  }
  .large {
    width: 33.33%; /* 设置大列宽度 */
  }
  .kind-table input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    text-align: center;
    background-color: white; /* 设置input背景为白色 */
  }
</style>
